/*
 * @Author: your name
 * @Date: 2021-04-27 10:12:48
 * @LastEditTime: 2021-04-27 13:47:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \umi\src\components\GlobalHeader\RightContent.tsx
 */
import { Tooltip, Tag } from 'antd';
import type { Settings as ProSettings } from '@ant-design/pro-layout';
import { QuestionCircleOutlined } from '@ant-design/icons';
import React from 'react';
import type { ConnectProps } from 'umi';
import { connect, SelectLang } from 'umi';
import type { ConnectState } from '@/models/connect';
import Avatar from './AvatarDropdown';
import HeaderSearch from '../HeaderSearch';
import styles from './index.less';

export type GlobalHeaderRightProps = {
  theme?: ProSettings['navTheme'] | 'realDark';
} & Partial<ConnectProps> &
  Partial<ProSettings>;

const ENVTagColor = {
  dev: 'orange',
  test: 'green',
  pre: '#87d068',
};

const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
  const { theme, layout } = props;
  let className = styles.right;

  if (theme === 'dark' && layout === 'top') {
    className = `${styles.right}  ${styles.dark}`;
  }

  return (

    // <div className={className}>
    //   <HeaderSearch
    //     className={`${styles.action} ${styles.search}`}
    //     placeholder="站内搜索"
    //     defaultValue="umi ui"
    //     options={[
    //       { label: <a href="https://umijs.org/zh/guide/umi-ui.html">umi ui</a>, value: 'umi ui' },
    //       {
    //         label: <a href="next.ant.design">Ant Design</a>,
    //         value: 'Ant Design',
    //       },
    //       {
    //         label: <a href="https://protable.ant.design/">Pro Table</a>,
    //         value: 'Pro Table',
    //       },
    //       {
    //         label: <a href="https://prolayout.ant.design/">Pro Layout</a>,
    //         value: 'Pro Layout',
    //       },
    //     ]}
    //     // onSearch={value => {
    //     //   //console.log('input', value);
    //     // }}
    //   />
    //   <Tooltip title="使用文档">
    //     <a
    //       style={{
    //         color: 'inherit',
    //       }}
    //       target="_blank"
    //       href="https://pro.ant.design/docs/getting-started"
    //       rel="noopener noreferrer"
    //       className={styles.action}
    //     >
    //       <QuestionCircleOutlined />
    //     </a>
    //   </Tooltip>
    <Avatar />
    //   {REACT_APP_ENV && (
    //     <span>
    //       <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
    //     </span>
    //   )}
    //   <SelectLang className={styles.action} />
    // </div>
  );
};

export default connect(({ settings }: ConnectState) => ({
  theme: settings.navTheme,
  layout: settings.layout,
}))(GlobalHeaderRight);
